@import '../../../variable.less';

.cate {
  height: 480px;
  padding: 15px 0 0;
  background: @catbgcolor;
}

  .cate-ul {
    position: relative;
  }
  .last {
    display: none;
  }
  li {
    &:hover {
      background: @cathovercolor;
    }
    a {
      color: @whitecolor;
      font-size: 14px;
      &:hover {
        .cate-list-name {
          color: @hovercolor;
        }
      }
    }
  }
  .cate-menu-list {
    padding-left: 12px;
    height: 30px;
    line-height: 30px;
  }
  .content {
    top: -15px;
    left: 100%;
    width: 452%;
    padding: 15px 15px 15px 20px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, .3);
    box-sizing: border-box;
    background: @bodybgcolor;
    .cate-chanel {
      width: 100%;
    }
    .cate-chanel-link {
      display: inline-block;
      height: 24px;
      line-height: 24px;
      padding: 0px 10px;
      margin-right: 10px;
      font-size: 12px;
      background: gray;
      i {
        font-size: 12px;
      }
    }
    .cate-detail {
      margin-top: 5px;
      margin-left: 10px;
      .cate-detail-item {
        position: relative;
        padding-left: 80px;
        margin: 0;
        &.cateitem1 {
          .cate-detail-con {
            border-top: none;
          }
        }
        .cate-detail-tit {
          position: absolute;
          top: 10px;
          left: 0;
          width: 70px;
          text-align: right;
          text-overflow: ellipsis;
        }
        .cate-detail-con {
          padding: 4px 0;
          border-top: 1px solid @linecolor*1.1;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .cate-detail-tit-link {
          color: #444;
          font-size: 12px;
          font-weight: 700;
          &:hover {
            color: @hovercolor;
          }
          i {
            font-size: 12px;
          }
        }
        .cate-detail-con-link {
          display: inline-block;
          font-size: 12px;
          height: 18px;
          line-height: 18px;
          padding: 0 10px;
          color: @headercolor;
          border-left: 1px solid @linecolor;
          &:hover {
            color: @hovercolor;
          }
        }
      }
    }
    .cate-brand {
      padding-left: 20px;
      ul {
        padding-left: 0;
        li {
          border-bottom: 1px solid @whitecolor;
          &:nth-child(2n+1) {
            border-right: 1px solid @whitecolor;
          }
        }
      }
    }
    .cate-brand-a {
      display: inline-block;
      width: 100%;
      img {
        height: 35px;
      }
    }
    .cate-promation-a {
      display: inline-block;
      width: 100%;
      border-bottom: 1px solid @whitecolor;
      img {
        height: 134px;
      }
    }
  }
.toggle {
  &.active {
    .content {
      display: block;
    }
    .firstchild-link {
      box-shadow: 1px 1px 3px rgba(45, 45, 45, .5);
      &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -3px;
        height: 6px;
        z-index: 4;
        background: @whitecolor;
      }
    }
  }
  .content {
    display: none;
    position: absolute;
    background: @whitecolor;
    border: 1px solid @linecolor;
    box-shadow: 1px 1px 3px rgba(45, 45, 45, .5);
    z-index: 3;
  }
}
